<template>
  <div class="login">
    <head-view>
      <span slot="left"><i class="el-icon-arrow-left"></i></span>
      <span slot="center">登录</span>
    </head-view>
    <div class="login-main">
      <el-form
        :label-position="labelPosition"
        label-width="80px"
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
      >
        <el-form-item label="手机号" class="tel" prop="tel">
          <div class="inputDeep">
            <el-input id="b0" v-model="ruleForm.tel"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="密码" prop="pwd">
          <div class="inputDeep">
            <el-input id="b0" v-model="ruleForm.pwd" show-password></el-input>
          </div>
        </el-form-item>
      </el-form>
      <el-button type="primary" round class="submit" @click="submit"
        >提交</el-button
      >
    </div>
    <p>没有账号？立即注册</p>
  </div>
</template>

<script>
import HeadView from "@/components/HeadView.vue";
export default {
  components: { HeadView },
  data() {
    return {
      labelPosition: "left",
      ruleForm: {
        pwd: "123456",
        tel: "17342065059",
      },
      rules: {
        pwd: [
          { message: "请输入密码", trigger: "blur" },
          { min: 3, max: 6, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        tel: [
          { message: "请输入手机号", trigger: "change" },
          { min: 11, max: 11, message: "请输入11位手机号码", trigger: "blur" },
          {
            pattern:
              /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
            message: "请输入正确的手机号",
          },
        ],
      },
    };
  },
  methods: {
    submit() {
      if (this.ruleForm.tel == "17342065059" && this.ruleForm.pwd == "123456") {
        this.$message({
          message: "恭喜你，登陆成功",
          type: "success",
          duration: 1000, //弹框持续的时长
          onClose: () => {
            // 登陆成功以后，保存token
            window.localStorage.setItem("tel", this.ruleForm.tel);
            //实现页面跳转
            this.$router.push("/index");
          },
        });
      } else {
        this.$message({
          message: "用户或密码错误",
          type: "warning",
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.login {
  height: 100%;
  background: #fafaf9;
}
.login-main {
  margin-top: 40px;
}
.el-form {
  background: #fff;
}
.el-form-item {
  padding: 10px;
  margin-bottom: 0;
}
.tel {
  border-bottom: 1px solid #fdfcfc;
}
.inputDeep {
  ::v-deep input {
    border: 0;
  }
}
.submit {
  width: 89%;
  margin: 22px 5%;
}
p {
  margin-top: 35px;
  text-align: center;
  color: #3e46ee;
}
</style>
